<template>
  <div class="matrix-table-wrapper">
    <table>
      <thead>
        <tr>
          <th></th>
          <th class="th-option t-input" v-for="(_, i) in _options" :key="i">
            <TextArea :textAreaStyle="textAreaStyle" :rows="1" v-model="_options[i]" :placeholder="'输入选项'" />
            <span class="del svg hover-light" :data-index="i" @click="delOption">
              <svg t="1657767302865" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2276" width="200" height="200">
                <path d="M840 288H688v-56c0-40-32-72-72-72h-208C368 160 336 192 336 232V288h-152c-12.8 0-24 11.2-24 24s11.2 24 24 24h656c12.8 0 24-11.2 24-24s-11.2-24-24-24zM384 288v-56c0-12.8 11.2-24 24-24h208c12.8 0 24 11.2 24 24V288H384zM758.4 384c-12.8 0-24 11.2-24 24v363.2c0 24-19.2 44.8-44.8 44.8H332.8c-24 0-44.8-19.2-44.8-44.8V408c0-12.8-11.2-24-24-24s-24 11.2-24 24v363.2c0 51.2 41.6 92.8 92.8 92.8h358.4c51.2 0 92.8-41.6 92.8-92.8V408c-1.6-12.8-12.8-24-25.6-24z" p-id="2277"></path>
                <path d="M444.8 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24zM627.2 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24z" p-id="2278"></path>
              </svg>
            </span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(_, i) in _subTitles" :key="i">
          <td class="td-title t-input">
            <TextArea :textAreaStyle="textAreaStyle" :rows="2" v-model="_subTitles[i]" :placeholder="'输入标题'" />
            <span class="del svg hover-light" :data-index="i" @click="delTitle">
              <svg t="1657767302865" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2276" width="200" height="200">
                <path d="M840 288H688v-56c0-40-32-72-72-72h-208C368 160 336 192 336 232V288h-152c-12.8 0-24 11.2-24 24s11.2 24 24 24h656c12.8 0 24-11.2 24-24s-11.2-24-24-24zM384 288v-56c0-12.8 11.2-24 24-24h208c12.8 0 24 11.2 24 24V288H384zM758.4 384c-12.8 0-24 11.2-24 24v363.2c0 24-19.2 44.8-44.8 44.8H332.8c-24 0-44.8-19.2-44.8-44.8V408c0-12.8-11.2-24-24-24s-24 11.2-24 24v363.2c0 51.2 41.6 92.8 92.8 92.8h358.4c51.2 0 92.8-41.6 92.8-92.8V408c-1.6-12.8-12.8-24-25.6-24z" p-id="2277"></path>
                <path d="M444.8 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24zM627.2 744v-336c0-12.8-11.2-24-24-24s-24 11.2-24 24v336c0 12.8 11.2 24 24 24s24-11.2 24-24z" p-id="2278"></path>
              </svg>
            </span>
          </td>
          <td class="td-circle" v-for="(_, j) in _options" :key="j"></td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="config">
    <div class="add-btn flex-center hover-light" @click="addOption">
      <span class="svg">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="coral-icon coral-icon-add_to_line"><path d="M11 8v3H8a1 1 0 100 2h3v3a1 1 0 102 0v-3h3a1 1 0 100-2h-3V8a1 1 0 10-2 0m.139-3.956a7.995 7.995 0 018.816 8.817c-.382 3.693-3.4 6.712-7.094 7.095a7.995 7.995 0 01-8.816-8.817c.382-3.693 3.4-6.712 7.094-7.095m2.558-1.903C6.867 1.009 1.009 6.868 2.14 13.697c.686 4.138 4.024 7.476 8.162 8.162 6.83 1.132 12.688-4.727 11.556-11.556-.686-4.138-4.023-7.476-8.162-8.162" fill-rule="evenodd"></path></svg>
      </span>
      <span class="text-padding">添加选项</span>
    </div>
    <div class="add-btn flex-center hover-light" :class="{ active: order === newSurveyData.currentOrder && newSurveyData.batchEdit && !newSurveyData.isSubTitle }" @click="newSurveyData.modifyBatchEdit(true)">
      <span class="svg">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="coral-icon coral-icon-batch_add_to_option_line">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M6 4a1 1 0 10-2 0v9a1 1 0 102 0"></path>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M6 11a1 1 0 10-2 0v9a1 1 0 102 0M13 4a1 1 0 10-2 0v16a1 1 0 102 0M18 21.007v-2h-2a1 1 0 110-2h2v-2a1 1 0 112 0v2h2a1 1 0 110 2h-2v2a1 1 0 11-2 0M20 4a1 1 0 10-2 0v7a1 1 0 102 0"></path>
          <path opacity="0.01" d="M0 0v24h24V0z"></path>
        </svg>
      </span>
      <span class="text-padding">批量编辑选项</span>
    </div>
    <div class="add-btn flex-center hover-light" @click="addTitle">
      <span class="svg">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="coral-icon coral-icon-add_others_line">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M11 11V8a1 1 0 112 0v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H8a1 1 0 110-2h3zm1 9a7.991 7.991 0 01-7.955-8.861c.382-3.693 3.4-6.712 7.094-7.095A7.99 7.99 0 0119.999 12h2c0-.556-.045-1.123-.14-1.697-.686-4.138-4.023-7.476-8.162-8.162C6.867 1.009 1.009 6.868 2.14 13.697c.686 4.138 4.024 7.476 8.162 8.162.574.095 1.14.14 1.697.14v-1.998z"></path>
          <path opacity="0.01" d="M0 0h24v24H0z"></path>
          <rect x="15" y="15" width="7" height="2" rx="0.667"></rect>
          <rect x="15" y="19" width="4" height="2" rx="0.667"></rect>
        </svg>
      </span>
      <span class="text-padding">添加题目</span>
    </div>
    <div class="add-btn flex-center hover-light" :class="{ active: order === newSurveyData.currentOrder && newSurveyData.batchEdit && newSurveyData.isSubTitle }" @click="newSurveyData.modifyBatchEdit(true, true)">
      <span class="svg">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="coral-icon coral-icon-batch_add_to_option_line">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M6 4a1 1 0 10-2 0v9a1 1 0 102 0"></path>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M6 11a1 1 0 10-2 0v9a1 1 0 102 0M13 4a1 1 0 10-2 0v16a1 1 0 102 0M18 21.007v-2h-2a1 1 0 110-2h2v-2a1 1 0 112 0v2h2a1 1 0 110 2h-2v2a1 1 0 11-2 0M20 4a1 1 0 10-2 0v7a1 1 0 102 0"></path>
          <path opacity="0.01" d="M0 0v24h24V0z"></path>
        </svg>
      </span>
      <span class="text-padding">批量编辑题目</span>
    </div>
  </div>
</template>

<script>
import newSurveyData from '@/store/new-survey-data'
import TextArea from '@/components/TextArea.vue'

export default {
  components: { TextArea },
  props: ['order'],
  data() {
    return {
      newSurveyData: newSurveyData(),
      questions: newSurveyData().questions[this.order],
      textAreaStyle: {
        'font-size': '14px',
        padding: '4px',
      },
    }
  },
  computed: {
    _options() {
      let option
      try {
        option = this.newSurveyData.questions[this.order].options
      } catch (error) {
        console.warn('矩阵单选 computed options 时出错',error.message)
      }
      return option
    },
    _subTitles() {
      let subTitles
      try {
        subTitles = this.newSurveyData.questions[this.order].subTitles
      } catch (error) {
        console.warn('矩阵单选 computed subTitles 时出错',error.message)
      }
      return subTitles
    },
  },
  watch: {
    _options: {
      handler() {
        this.newSurveyData.storageQuestions()
      },
      deep: true,
    },
    _subTitles: {
      handler() {
        this.newSurveyData.storageQuestions()
      },
      deep: true,
    },
  },
  methods: {
    addOption() {
      this._options.push('')
      this.newSurveyData.storageQuestions()
    },
    addTitle() {
      this._subTitles.push('')
      this.newSurveyData.storageQuestions()
    },
    delOption(e) {
      const { index } = e.currentTarget.dataset
      if (this._options.length <= 1) {
        this.$msg('至少要有一个选项', 'error')
        return
      }
      this.newSurveyData.delOption(this.order, index)
    },
    delTitle(e) {
      const { index } = e.currentTarget.dataset
      if (this._subTitles.length <= 1) {
        this.$msg('至少要有一个子标题', 'error')
        return
      }
      this.newSurveyData.delSubTitle(this.order, index)
    },
  },
}
</script>

<style lang="scss" scoped>
.matrix-table-wrapper {
  overflow-x: auto;
  padding-left: 30px;

  table {
    width: max-content;
    margin: auto;
    margin-top: 20px;
    padding-top: 20px;

    border-collapse: collapse;
    word-break: break-all;

    tr {
      border-bottom: 1px solid #c3c2c2;
    }
    tbody tr:last-of-type {
      border-bottom: none;
    }
    th,
    td {
      width: 140px;
      position: relative;
      > .del {
        position: absolute;
        cursor: pointer;
      }
    }
    .th-option {
      padding-bottom: 16px;
      > .del {
        bottom: 0;
        right: 50%;
        transform: translateX(50%);
      }
    }
    .td-title {
      width: 200px;
      padding-left: 22px;
      > .del {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
    }
    .td-circle::before {
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid #c9c9c9;

      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
  }
}
.config {
  @include flex($jc: flex-start, $fw: wrap);
  padding: 20px;

  .add-btn {
    flex: 1 0 auto;
    width: max-content;
    box-sizing: content-box;
    margin: 4px 10px;
  }
  .active {
    background-color: #fafafa;
    color: #448cff;
    border-color: #448cff;
    fill: #448cff;
  }
}
</style>
